import style from "./style.less";
import { useEffect } from 'react'
import { Form, Input, Button, Checkbox } from "antd";
import { LoginModelState, useDispatch, useSelector } from "umi";
import { v4 as uuidv4 } from 'uuid';

function LoginPage() {
    let uuid = uuidv4() // uuid
    const dispatch = useDispatch()

    const { Logincode } = useSelector((state: { login: LoginModelState }) => state.login);

    const Demo = () => {
        const onFinish = (values: any) => {
            const adminvalue = values // input框内容 （账号，密码，验证码）
            let t = new Date().getTime() // 当前时间
            dispatch({
                type: "login/login",
                payload: { ...adminvalue, t, sessionUUID: uuid }
            })
        };

        const onFinishFailed = (errorInfo: any) => {
            console.log('Failed:', errorInfo);
        };

        return (
            <Form
                name="basic"
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    name="principal"
                    rules={[{ required: true, message: '账号不能为空' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    name="credentials"
                    rules={[{ required: true, message: '密码不能为空' }]}
                >
                    <Input type="password" />
                </Form.Item>
                <Form.Item
                    name="imageCode"
                    rules={[{ required: true, message: '请输入验证码' }]}
                >
                    <div style={{ display: "flex" }}>
                        <Input />
                        <img src={`http://bjwz.bwie.com/mall4w/captcha.jpg?uuid=${uuid}`}
                            alt="" />
                    </div>
                </Form.Item>


                <Form.Item>
                    <Button type="primary" htmlType="submit" style={{ width: 100 + '%' }}>
                        登录
                    </Button>
                </Form.Item>
            </Form>
        );
    };


    return (
        <div className={style.Login_box}>
            <div className={style.logo}>
                <img src="" alt="" />
            </div>
            <div className={style.From_box}>
                <Demo></Demo>
            </div>
        </div>
    );
}



export default LoginPage